<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>09-边框_02-形状</title>
    <style>
        /*div {
            width: 0;
            height: 0;
            !*background-color: #f00;*!

            border-top: 20px solid yellow;
            border-left: 20px solid transparent;
            !*border-right: 5px solid purple;
            border-bottom: 5px solid green;*!

            !* 正数：顺时针旋转，负数：逆时针宣传 *!
            !*transform: rotate(-45deg);*!
        }*/


        /*div {
            width: 0;
            height: 0;
            !*background-color: #f00;*!
            !*transform: rotate(45deg);*!

            border-left: 20px solid yellow;
            border-bottom: 40px solid blue;
        }*/

        div {
            width: 0;
            height: 0;

            border-left: 80px solid yellow;
            border-bottom: 40px solid transparent;
            border-right: 40px solid transparent;
            border-top: 40px solid transparent;
        }
    </style>
</head>
<body>

<div></div>

</body>
</html>